<script setup lang="ts">
// 定义产品优势数据
const advantages = ref([
  {
    id: 1,
    percentage: '25%',
    title: '生产效率提升',
    description: '通过智能化自动化系统，显著提升生产线效率和产品质量'
  },
  {
    id: 2,
    percentage: '20%',
    title: '运营成本降低',
    description: '优化资源配置，减少人工成本，降低整体运营费用'
  },
  {
    id: 3,
    percentage: '40%',
    title: '人力资源优化',
    description: '释放人力资源，让员工专注于更有价值的创新工作'
  }
])
</script>

<template>
  <!-- 产品优势 -->
  <section id="advantages" class="section bg-gray-50 w-full py-16">
    <div class="w-full max-w-[2000px] mx-auto px-4 md:px-8 lg:px-16">
      <div class="text-center mb-12">
        <h2 class="text-3xl lg:text-4xl font-bold mb-4">
          <span
            class="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent">产品优势</span>
        </h2>
        <p class="text-lg text-gray-600 leading-relaxed text-center">
          DeepNow技术平台为企业提供卓越的自动化解决方案，帮助提升生产效率，降低运营成本，增强市场竞争力。
        </p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
        <!-- 循环生成优势卡片 -->
        <div
          v-for="advantage in advantages"
          :key="advantage.id"
          class="group flex flex-col transform items-center border border-gray-100 rounded-2xl bg-white p-6 text-center shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
        >
          <div class="text-5xl lg:text-6xl font-bold mb-4 group-hover:text-blue-600 transition-colors">{{ advantage.percentage }}</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-900 group-hover:text-blue-600 transition-colors">{{ advantage.title }}</h3>
          <p class="text-gray-600 leading-relaxed">
            {{ advantage.description }}
          </p>
        </div>
      </div>
    </div>
  </section>
</template>
